<script lang="ts" setup>
import { ref } from 'vue'
import gdaj from './tabs/gdaj.vue'
import ddcaj from './tabs/ddcaj.vue'
import ydcaj from './tabs/ydcaj.vue'
import { useRoute } from 'vue-router'
// 入参
// 生命周期
const route = useRoute()
const activeName = ref<string>((route.query.prePage as string) || 'gdaj')
// ref
const gdajRef = ref<InstanceType<typeof gdaj>>()
const ddcajRef = ref<InstanceType<typeof ddcaj>>()
const ydcajRef = ref<InstanceType<typeof ydcaj>>()

/*
 * 切换tab页
 */
const changeTabs = (val: string) => {
  switch (val) {
    case 'gdaj':
      gdajRef.value?.changePageNum(1)
      break
    case 'ddcaj':
      ddcajRef.value?.changePageNum(1)
      break
    case 'ydcaj':
      ydcajRef.value?.changePageNum(1)
      break
    default:
      break
  }
}
</script>
<template>
  <div class="container">
    <el-tabs v-model="activeName" type="card" @tab-change="changeTabs">
      <el-tab-pane label="归档案卷" name="gdaj" lazy>
        <gdaj ref="gdajRef" />
      </el-tab-pane>
      <el-tab-pane label="待导出案卷" name="ddcaj" lazy>
        <ddcaj ref="ddcajRef" />
      </el-tab-pane>
      <el-tab-pane label="已导出案卷" name="ydcaj" lazy>
        <ydcaj ref="ydcajRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #fff;
}
</style>
